<style>
    .panel-statistics h4 {
        color: #666;
        font-weight: bold;
        font-size: 14px;
    }

    .panel-statistics h3 {
        font-weight: 500;
        font-size: 12px;
        color: #333;
    }
    .panel-statistics h3 span {
        font-size: 30px;
    }

    .panel-statistics em {
        font-style: normal;
    }

    .panel-statistics .pull-right {
        padding-right: 10px;
    }

    .panel-statistics .table thead tr th {
        font-weight: normal;
    }

    .panel-statistics .table tbody tr td {
        font-weight: normal;
        vertical-align: middle;
    }

    .panel-statistics .table tbody tr td p {
        margin: 0;
    }

    #echarts1 textarea {
        display: block;
    }

    select.model_id {
        min-width: 60px;
    }

    .nav > li > a {
        padding: 5px 5px 0px 5px;
    }
    .panel-intro > .panel-heading .nav-tabs > li > a {
        margin-right: 0;
        color: #0d0d0d;
    }
    .fixed-table-toolbar{
        display: none;
    }
    .progress-bar {
        color: #020202;
        background-image: linear-gradient(to right, #4969e6, #1ac6f2);
    }
</style>

<div class="btn-refresh hidden" id="resetecharts"></div>
<div class="row">
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>{:__("本月工时")}</h4>
                    <h3>
                        {php}
                        $thismonth_hours_ratio = $lastmonth_hours > 0 ? ceil((($thismonth_hours - $lastmonth_hours) / $lastmonth_hours) * 100) : ($thismonth_hours > 0 ? 100 : 0);
                        {/php}
                        <span class="text-{:$thismonth_hours_ratio>=0?'success':'danger'}">{$thismonth_hours}</span>
                        <em  class="text-gray">(h)</em>

                        <em data-toggle="tooltip" data-title="{:__('上月')}：{$lastmonth_hours}"
                            class="text-{:$thismonth_hours_ratio>=0?'success':'danger'}">{:$thismonth_hours_ratio>=0?'+':''}
                            {$thismonth_hours_ratio}%</em>
                    </h3>
                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                        {:__('上月')}：{$lastmonth_hours}
                    </div>
                </div>

                <div class="pull-right" style="color:#c8cfff;">
                    <i class="fa fa-clock-o fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>{:__("本月任务")}</h4>
                    <h3>
                        {php}
                        $thismonth_num_ratio = $lastmonth_num > 0 ? ceil((($thismonth_num - $lastmonth_num) / $lastmonth_num) * 100) : ($thismonth_num > 0 ? 100 : 0);
                        {/php}
                        <span class="text-{:$thismonth_num_ratio>=0?'success':'danger'}">{$thismonth_num}</span>
                        <em  class="text-gray"></em>

                        <em data-toggle="tooltip" data-title="{:__('上月')}：{$lastmonth_num}"
                            class="text-{:$thismonth_num_ratio>=0?'success':'danger'}">{:$thismonth_num_ratio>=0?'+':''}
                            {$thismonth_num_ratio}%</em>
                    </h3>
                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                        {:__('上月')}：{$lastmonth_num}
                    </div>
                </div>

                <div class="pull-right" style="color:#ffc8c8;">
                    <i class="fa fa-calendar fa-2x"></i>
                </div>


            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">

                <div class="pull-left">
                    <h4>{:__("待处理任务")}</h4>
                    <h3>
                        <span class="text-{:$todo_num>=3?'danger':'success'}">{$todo_num}</span>
                        <em  class="text-gray"></em>


                    </h3>
                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                        {:__('合理安排时间处理任务')}
                    </div>
                </div>

                <div class="pull-right" style="color:#c8e3ff;">
                    <i class="fa fa-refresh fa-2x"></i>
                </div>

            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">

                <div class="pull-left">
                    <h4 >{:__("逾期任务")}</h4>
                    <h3>
                        <span class="text-danger">{$overdue_num}</span>
                        <em  class="text-gray"></em>
                    </h3>
                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                        {:__('请及时完成任务')}
                    </div>
                </div>

                <div class="pull-right" style="color:#d62c1a;">
                    <i class="fa fa-info-circle fa-2x"></i>
                </div>


            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-top:20px;">
    <div class="col-xs-12 col-sm-6">

        <div class="panel panel-default panel-intro">

            <div class="panel-heading">
                <span class="label label-primary pull-right">{:__('我的任务')}</span>
                <ul class="nav nav-tabs" id="tab-my-task" >
                    <li class='active'>
                         <a  href="#t-1" data-filter='{"status":"1,0"}' data-op='{"status":"in"}' data-toggle="tab">{:__('未完成')}</a></li>
                    <li ><a  href="#t-2" data-filter='{"start_time":"{:date("Y-m-d 00:00:00", time())} - {:date("Y-m-d 23:59:59", time())}"}'
                             data-op='{"start_time":"RANGE"}' data-toggle="tab">{:__('今日')}</a></li>
                    {php}
                    $start_week= date("Y-m-d H:i:s",mktime(0, 0 , 0,date("m"),date("d")-date("w")+1,date("Y")));
                    $end_week= date("Y-m-d H:i:s",mktime(23,59,59,date("m"),date("d")-date("w")+7,date("Y")));

                    {/php}
                    <li ><a  href="#t-3" data-filter='{"start_time":"{$start_week} - {$end_week}"}'
                             data-op='{"start_time":"RANGE"}' data-toggle="tab">{:__('本周')}</a></li>
                    <li ><a  href="#t-4" data-filter='{"end_time":"{:time()}","status":"1,0"}'
                             data-op='{"end_time":"<","status":"in"}' data-toggle="tab">{:__('逾期')}</a></li>
                    <li ><a  href="#t-5" data-filter="" data-op="" data-toggle="tab">{:__('所有')}</a></li>

                </ul>

            </div>

            <div class="panel-body">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding" style="height: 400px;overflow: auto;">
                            <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                                   data-operate-add="{:$auth->check('workteam/task/add')}"
                                   data-operate-edit="{:$auth->check('workteam/task/edit')}"
                                   data-operate-del="{:$auth->check('workteam/task/del')}"
                                   data-operate-addchild="{:$auth->check('workteam/task/addchild')}"
                                   data-operate-detail="{:$auth->check('workteam/task/detail')}"
                                   data-operate-start="{:$auth->check('workteam/task/start')}"
                                   data-operate-complete="{:$auth->check('workteam/task/complete')}"
                                   width="100%">
                            </table>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
    <div class="col-xs-12 col-sm-6">

        <div class="panel panel-default panel-intro">

            <div class="panel-heading">
                <span class="label label-primary pull-right">{:__('我的项目')}</span>
                <ul class="nav nav-tabs" id="tab-my-project"  >

                    <li class='active'>
                        <a  href="#t-1" data-filter='{"status":"1,0"}' data-op='{"status":"in"}' data-toggle="tab">{:__('未完成')}</a></li>

                    <li ><a  href="#t-2" data-filter='{"start_time":"{$start_week} - {$end_week}"}'
                             data-op='{"start_time":"RANGE"}' data-toggle="tab">{:__('本周')}</a></li>
                    {php}

                    $this_start_month=date("Y-m-d H:i:s",mktime(0, 0 , 0,date("m"),1,date("Y")));
                    $this_end_month=date("Y-m-d H:i:s",mktime(23,59,59,date("m"),date("t"),date("Y")));
                    {/php}

                    <li ><a  href="#t-3" data-filter='{"start_time":"{$this_start_month} - {$this_end_month}"}'
                             data-op='{"start_time":"RANGE"}' data-toggle="tab">{:__('本月')}</a></li>


                    <li ><a  href="#t-4" data-filter='{"end_time":"{:time()}","status":"1,0"}'
                             data-op='{"end_time":"<","status":"in"}' data-toggle="tab">{:__('逾期')}</a></li>
                    <li ><a  href="#t-5" data-filter="" data-op="" data-toggle="tab">{:__('所有')}</a></li>

                </ul>

            </div>

            <div class="panel-body">
                <div  class="tab-content">
                    <div class="tab-pane fade active in" id="one1">
                        <div class="widget-body no-padding" style="height: 400px;overflow: auto;">
                            <table id="table1" class="table table-striped table-bordered table-hover table-nowrap"
                                   data-operate-add="{:$auth->check('workteam/task/add')}"
                                   data-operate-edit="{:$auth->check('workteam/task/edit')}"
                                   data-operate-del="{:$auth->check('workteam/task/del')}"
                                   data-operate-addchild="{:$auth->check('workteam/task/addchild')}"
                                   data-operate-detail="{:$auth->check('workteam/task/detail')}"
                                   data-operate-start="{:$auth->check('workteam/task/start')}"
                                   data-operate-complete="{:$auth->check('workteam/task/complete')}"
                                   width="100%">
                            </table>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>

<div class="row" style="margin-top:15px;">
    <div class="col-xs-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <h4>我的工时</h4>
                <div id="datefilter">

                    <form id="form1" action="" role="form" novalidate class="form-inline">
                        <a href="javascript:;" class="btn btn-primary btn-refresh"><i class="fa fa-refresh"></i></a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Today')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Yesterday')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 7 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 30 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last month')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('This month')}</a>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control input-inline datetimerange datetimerange1" placeholder="指定日期" style="width:270px;"
                                   data-type="hours" data-url="{:url('workteam/dashboard/myhours',['ajax'=>1])}" />
                        </div>
                    </form>
                </div>
                <div id="hours-echart" style="height:400px;width:100%;margin-top:15px;"></div>
            </div>
        </div>
    </div>
</div>
<script>
    var Echartdata = {:json_encode($erchart)};
</script>